<template>
  <div class="chart-box">
    <div class="chart" ref="chartBox"></div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      chartData: [],
      chartObj: null,
      type: 'line'
    };
  },
  props: ['option'],
  methods: {
    resize: function () {
      this.chartObj.resize();
    },
    changeType() {
      this.setOption()
    },
    setOption() {
      let option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            id: 0,
            name: 'tree1',
            data: [this.chartData],
            top: '10%',
            left: '8%',
            bottom: '22%',
            right: '20%',
            symbolSize: 7,
            edgeShape: 'polyline',
            edgeForkPosition: '63%',
            initialTreeDepth: 3,
            lineStyle: {
              width: 2
            },
            label: {
              // backgroundColor: '#fff',
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              normal: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                color: this.$AxisColor
              }
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      };
      this.chartObj.clear();
      this.option && this.chartObj.setOption(option);
    },
  },
  mounted() {
    console.log(123, this.option)
    this.chartData = this.option
    this.chartObj = this.$echarts.init(this.$refs.chartBox);
    this.chartData.children && this.setOption();

    window.addEventListener("resize", () => {
      this.resize();
    });
  },
  watch: {
    option(val) {
      this.chartData = val
      this.setOption()
    }
  },
  beforeDestroy() {
    this.chartObj.dispose();
    this.chartObj.clear();
    window.removeEventListener("resize", this.resize);
  },
};
</script>
<style scoped lang="less">
.chart-box {
  height: 100%;
  width: 100%;
  padding: 10px 0 0 20px;
  box-sizing: border-box;
  position: relative;
  .change-type {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 6;
  }
  .chart{
    height: 100%;
    width: 100%;
  }
}
</style>